<template>
  <div class="dingdie">
    <el-tabs type="border-card">
      <el-tab-pane label="缴费信息详情">
        <div>
          <el-form
            :model="ruleForm"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm jiaoshuk"
          >
            <el-form-item label="缴费产品:">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.payname"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item label="缴费人员：">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.username"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item label="缴费金额：">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.paymoney"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item label="缴费优先级：">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.paylevel"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item label="支付时间：">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.costtime"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item label="支付状态">
              <el-input
                class="jiaofeichan"
                v-model="ruleForm.coststatus"
                readonly="readonly"
              />
            </el-form-item>
            <el-form-item style="width: 100%" label="支付类型:">
              <el-radio-group class="fukuanfang" v-model="ruleForm.costtype">
                <el-radio :label="1" class="yuananniu"
                  ><img
                    style="width: 100px; vertical-align: middle"
                    src="../../../../assets/images/zfb1.png"
                    alt=""
                /></el-radio>
                <el-radio :label="2"
                  ><img
                    style="width: 100px; vertical-align: middle"
                    src="../../../../assets/images/wx1.png"
                    alt=""
                /></el-radio>
                <el-radio :label="3"
                  ><img
                    style="width: 100px; vertical-align: middle"
                    src="../../../../assets/images/ysf.png"
                    alt=""
                /></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="支付状态:">
              <el-div v-model="ruleForm.costcontent">
                {{ ruleForm.costcontent }}
              </el-div>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="fun" class="fanding" type="primary"><i class="el-icon-top-left"></i>返回</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      ruleForm: {
        username: "",
        payname: "",
        coststatus: "",
        paylevel: "",
        paymoney: "",
        costtime: "",
        costtype: "",
        costcontent: "",
      },
    };
  },
  created() {
    const id = this.$route.query.id;
    console.log(id);
    if (id) {
      this.id = id;
      this.getList(id);
    }
  },
  methods: {
    fun(){
      this.$router.push("/pay/payMessage")
    },
    async getList(id) {
      let res = await this.$axios.get(
        `http://community.byesame.com/cost/getCostDetail?id=${id}&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMS5qcGciLCJ0eXBlIjoiMSIsImlhdCI6MTc2MTcwMzk5MCwiZXhwIjoxNzYxNzkwMzkwfQ.unh5Img4da9DjodLV1c4cCXdrSvkFwAIadW7MGeQYhA`
      );
      console.log(res);
      this.ruleForm.payname = res.data[0].payname;
      this.ruleForm.username = res.data[0].username;
      this.ruleForm.paymoney = res.data[0].paymoney;
      this.ruleForm.paylevel = res.data[0].paylevel;

      this.ruleForm.costtime = res.data[0].costtime;
      this.ruleForm.coststatus =
        res.data[0].coststatus === 1 ? "已支付" : "未支付";
      this.ruleForm.costtype = res.data[0].costtype;
      this.ruleForm.costcontent = res.data[0].costcontent;
    },
    formatDateTime(isoTime) {
      if (!isoTime) return "";
      const date = new Date(isoTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
};
</script>

<style scoped>
.jiaoshuk {
  display: flex;
  width: 95%;
  margin: 1.25rem auto;
  flex-wrap: wrap;
  justify-content: space-between;
}
.jiaofeichan {
  width: 39rem;
}
.fukuanfang {
  margin-left: 1.875rem;
}
.dingdie{
  position: relative;
}
.fanding{
  position: absolute;
  top: 1.5rem;
  right: -0.125rem;
}
</style>